<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>添加成员</title>
    <link rel="stylesheet" type="text/css" href="./css/imgareaselect-animated.css" />
    <link rel="stylesheet" type="text/css" href="./css/imgareaselect-animated.css" />
    <link rel="stylesheet" type="text/css" href="./css/imgareaselect-animated.css" />
    <style>
      #original_picture{max-width:400px; width:expression(this.width > 400 ? "400px" : this.width); height:auto}
      #preview{}
      #div_preview{            
      //float: left;
      position: relative;
      overflow: hidden;
      width: 100px;
      height: 100px;
      }
    </style>
  </head>
  <body>
    <h1>添加成员</h1>
    <script src="./Js/jquery-1.6.4.js"></script>
    <script src="./Js/jquery.imgareaselect.js"></script>
    <script src="./Js/jquery.form.js"></script> 
    <script>
    ICON_WIDTH=100;
//ICON_HEIGHT=100;
function preview(img, selection) {
    
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);
    $('#preview').css({
	width: Math.round(scaleX * $("#original_picture")[0].width) + 'px',
	height: Math.round(scaleY * $("#original_picture")[0].height) + 'px',
	// width: Math.round(scaleX * getImgWidth(img) / $("#original_picture")[0].width) + 'px',
	// height: Math.round(scaleY * getImgHeight(img) /$("#original_picture")[0].height) + 'px',

	marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
	marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });


    var msg = "image width: "+getImgWidth(img)+"<br/>";
    msg += "image height: "+getImgHeight(img)+"<br/>";
    msg += "scale X: "+scaleX+"<br/>";
    msg += "scale Y: "+scaleY+"<br/>";
    msg += "width: "+Math.round(scaleX * $("#original_picture")[0].width) + 'px'+"<br/>";
    msg += "height: "+Math.round(scaleX * $("#original_picture")[0].height) + 'px'+"<br/>";
    $("#msg").html(msg);

    // update the selection
    $("input[name=x1]").val(selection.x1);
    $("input[name=y1]").val(selection.y1);
    $("input[name=x2]").val(selection.x2);
    $("input[name=y2]").val(selection.y2);
    $("input[name=width]").val(img.width);
    $("input[name=height]").val(img.height);
}
function getImgWidth(image)
{
    var img = new Image;
    img.src = image.src;
    return img.width;
}
function getImgHeight(image)
{
    var img = new Image;
    img.src = image.src;
    return img.height;
}

$(document).ready(function () {
    
    $("form#member").ajaxForm(function(response, state){
	if (state == "success")
	{
	    res = JSON.parse(response);
	    $("#original_picture")[0].src = res.pic;
	    $("#preview")[0].src = res.pic;
	    $('#original_picture').imgAreaSelect({ x1: 0, y1: 0, x2: ICON_WIDTH, y2: ICON_WIDTH,
						   aspectRatio: '1:1', 
						   onSelectChange: preview });
	    $("input[name=src]").val(res.pic);
	    $("input[name=user_id]").val(res.user_id);
	}
    });
    $("form#add-face").ajaxForm(function(response, state){
	if (state == "success")
	{
	    res = JSON.parse(response);
	    if(res.resp_id=="0000")
		alert(res.resp_data.msg);
	}
    });
    
    $("#input_photo").change(function(){
	$("form#member").submit();
    });
    $("#add-face-submit").click(function(){
    $("form#add-face").submit();
    return false;
    });
    
});

</script>
    <form id="member" enctype="multipart/form-data" method="post" action="./add-member.php">
      <div class="title">省/直辖市：
      </div>
      <div class="input">
        <input name="province" maxlength="16"/>
      </div>
      <div class="clear">
      </div>
      <div class="title">市/县：
      </div>
      <div class="input">
        <input name="city" maxlength="16"/>
      </div>
      <div class="clear">
      </div>
      <div class="title">姓名：
      </div>
      <div class="input">
        <input type="text" name="name" maxlength="16"/>
      </div>
      <div class="clear">
      </div>
      <div class="title">头像
      </div>
      <div class="input">
        <input type="file" name="icon_photo" id="input_photo" value="上传头像"/>
      </div>
      <div class="clear">
      </div>
    </form>
    <div>
      <img title="" alt="" src1="./img/psb.jpg" id="original_picture"/>
    </div>
    <div id="div_preview"><img id="preview" src1="./img/psb.jpg"/></div>
    <div>
      <form id="add-face" method="get" action="./add-member-face.php">
	<input type="1hidden" name="width"/>
	<input type="1hidden" name="height"/>
	<input type="1hidden" name="user_id"/>
	<input type="1hidden" name="src"/>
	<input type="1hidden" name="x1"/>
	<input type="1hidden" name="y1"/>
	<input type="1hidden" name="x2"/>
	<input type="1hidden" name="y2"/>
	<!-- <input type="submit" value="保存小头像"/> -->
        <button id="add-face-submit">保存小头像</button>
      </form>
    </div>
    <div id="msg">
    </div>
  </body>
</html>
